<template>
    <a-modal class="info_modal" v-model="visible" title="比例配置" :confirmLoading="submitLoading" width="1200px" ok-text="确认" cancel-text="取消" @ok="addFormSubmit" @cancel="modalClose">
        <a-form layout="inline">
            <a-row type="flex" justify="space-between">
                <a-col :span="7">
                    <a-form-item label="社保城市" class="formRequired">
                        <CityPicker v-if="infoType == 'add'" placeholder="选择社保城市" :cityList="cityList" @change="handleCity" :autoWidth="'200px'" :value.sync="params.cityId" style="margin-right: 30px;"></CityPicker>
                        <a-button type="danger" icon="delete" v-if="infoType == 'add'" @click="delCity">删除</a-button>
                        <a-input v-if="infoType == 'edit'" placeholder="城市名称" v-model="cityName" style="width: 310px;" disabled/>
                    </a-form-item>
                    <a-form-item label="新城市" v-if="infoType == 'add'">
                        <a-input placeholder="请输入新城市名称" v-model="newCityName" style="width: 200px;margin-right: 30px;" />
                        <a-button type="primary" icon="plus" @click="addCity">添加</a-button>
                    </a-form-item>
                </a-col>
                <a-col :span="7">
                    <a-form-item label="社保类型">
                        <a-select placeholder="请选择社保类型" @change="handleInsureType" :disabled="params.cityId ? false : true" allowClear v-model="params.insureTypeId" style="width: 200px;margin-right: 30px;">
                            <a-select-option v-for="item in insureTypeList" :key="item.typeId">{{ item.typeName
                            }}</a-select-option>
                        </a-select>
                        <a-button @click="delInsureType" type="danger" icon="delete" :disabled="params.cityId ? false : true">删除</a-button>
                    </a-form-item>
                    <a-form-item label="新类型">
                        <a-input placeholder="请输入新类型" v-model="newInsureTypeName" style="width: 200px;margin-right: 30px;"
                            :disabled="params.cityId ? false : true" />
                        <a-button type="primary" icon="plus" @click="addInsureType" :disabled="params.cityId ? false : true">添加</a-button>
                    </a-form-item>
                </a-col>
                <a-col :span="7">
                    <a-form-item label="公积金比例">
                        <a-select placeholder="请选择公积金比例" @change="handleFundsType" :disabled="params.cityId ? false : true" allowClear v-model="params.fundsTypeId" style="width: 200px;margin-right: 30px;">
                            <a-select-option v-for="item in fundsTypeList" :key="item.typeId">{{ item.typeName
                            }}</a-select-option>
                        </a-select>
                        <a-button @click="delFundsType" type="danger" icon="delete" :disabled="params.cityId ? false : true">删除</a-button>
                    </a-form-item>
                    <a-form-item label="新比例">
                        <a-input placeholder="请输入新比例" :disabled="params.cityId ? false : true" v-model="newFundsTypeName" style="width: 200px;margin-right: 30px;" />
                        <a-button type="primary" icon="plus" @click="addFundsType" :disabled="params.cityId ? false : true">添加</a-button>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
        <a-table :columns="columns" :data-source="params.configs" :pagination="false" style="margin-top: 20px;">
            <span slot="isShow" slot-scope="text,record,index">
                <a-checkbox @change="isShowChange(text, index)" :checked="text == 1 ? true : false"></a-checkbox>
            </span>
            <span slot="minBase" slot-scope="text,record">
                <a-input v-model="record.minBase" placeholder="数值" style="width: 80px;"></a-input>
            </span>
            <span slot="maxBase" slot-scope="text,record">
                <a-input v-model="record.maxBase" placeholder="数值" style="width: 80px;"></a-input>
            </span>
            <span slot="fixBase" slot-scope="text,record">
                <a-input v-model="record.fixBase" placeholder="数值" style="width: 80px;"></a-input>
            </span>
            <span slot="personalFixValue" slot-scope="text,record">
                基数 x
                <a-input v-model="record.personalRatio" placeholder="比例" style="width: 80px;"></a-input>
                +
                <a-input v-model="record.personalFixValue" placeholder="固定值" style="width: 80px;"></a-input>
            </span>
            <span slot="companyFixValue" slot-scope="text,record">
                基数 x
                <a-input v-model="record.companyRatio" placeholder="比例" style="width: 80px;"></a-input>
                +
                <a-input v-model="record.companyFixValue" placeholder="固定值" style="width: 80px;"></a-input>
            </span>
        </a-table>
    </a-modal>
</template>

<script>
import {
    cityAll,
    cityAdd,
    cityDelete,
    typeGetTypes,
    typeAdd,
    typeDelete,
    configQuery,
    configAdd,
} from "@/api/human/park";
import { mapGetters, mapActions } from 'vuex';
import CityPicker from './components/city-picker.vue';
import { addInsureStaff } from '@/api/human/ensureJoinStaff';
export default {
    name: 'AddInfo',
    components: {
        CityPicker
    },
    data() {
        return {
            visible: false,
            infoType: 'add', // 弹出框类型
            params: {
                cityId: "",
                insureTypeId: undefined,
                fundsTypeId: undefined,
                configs: [],
            },
            columns: [{
                title: '缴纳项目',
                dataIndex: 'insureType',
                customRender: (text, row, index) => {
                    if (text == 1) {
                        return '养老保险'
                    } else if (text == 2) {
                        return '医疗保险'
                    } else if (text == 3) {
                        return '失业保险'
                    } else if (text == 4) {
                        return '工伤保险'
                    } else if (text == 5) {
                        return '生育保险'
                    } else if (text == 6) {
                        return '大病保险'
                    } else if (text == 7) {
                        return '残保金'
                    } else if (text == 8) {
                        return '公积金'
                    }
                    return ''
                }
            },
            {
                title: "是否计算显示",
                dataIndex: "isShow",
                align: "center",
                scopedSlots: { customRender: 'isShow' }
            },
            {
                title: '下限',
                dataIndex: 'minBase',
                scopedSlots: { customRender: 'minBase' }
            },
            {
                title: "上限",
                dataIndex: "maxBase",
                scopedSlots: { customRender: 'maxBase' }
            },
            {
                title: "固定",
                dataIndex: "fixBase",
                scopedSlots: { customRender: 'fixBase' }
            },
            {
                title: '个人缴纳',
                dataIndex: 'personalFixValue',
                scopedSlots: { customRender: 'personalFixValue' }
            },
            {
                title: "企业缴纳",
                dataIndex: "companyFixValue",
                scopedSlots: { customRender: 'companyFixValue' }
            }],

            cityName: "",
            newCityName: "",
            newInsureTypeName: "",
            newFundsTypeName: "",
            cityList: {}, // 社保城市列表
            insureTypeList: [], // 社保类型列表
            fundsTypeList: [], // 公积金比例列表

            submitLoading: false,
            isDisabled: true,
        }
    },
    computed: {
        ...mapGetters(['orgData', 'orgFields']),
    },
    methods: {
        ...mapActions({
            getAllDepartmentTree: 'department/getAllDepartmentTree'
        }),
        // 初始化方法
        async add(id,name) {
            this.visible = true;
            this.infoType = id ? 'edit' : 'add';
            this.params.cityId = "";
            this.params.insureTypeId = undefined;
            this.params.fundsTypeId = undefined;
            this.getCityList();
            if (id) {
                // 编辑
                this.params.cityId = id;
                this.cityName = name;
                this.params.configs = [];
                this.getinsureTypeList();
            } else {
                // 新增
                this.params.configs = [{
                    insureType: 1,
                    isShow: 0,
                    minBase: 0,
                    maxBase: 0,
                    fixBase: 0,
                    personalRatio: 0,
                    personalFixValue: 0,
                    companyRatio: 0,
                    companyFixValue: 0
                }, {
                    insureType: 2,
                    isShow: 0,
                    minBase: 0,
                    maxBase: 0,
                    fixBase: 0,
                    personalRatio: 0,
                    personalFixValue: 0,
                    companyRatio: 0,
                    companyFixValue: 0
                }, {
                    insureType: 3,
                    isShow: 0,
                    minBase: 0,
                    maxBase: 0,
                    fixBase: 0,
                    personalRatio: 0,
                    personalFixValue: 0,
                    companyRatio: 0,
                    companyFixValue: 0
                }, {
                    insureType: 4,
                    isShow: 0,
                    minBase: 0,
                    maxBase: 0,
                    fixBase: 0,
                    personalRatio: 0,
                    personalFixValue: 0,
                    companyRatio: 0,
                    companyFixValue: 0
                }, {
                    insureType: 5,
                    isShow: 0,
                    minBase: 0,
                    maxBase: 0,
                    fixBase: 0,
                    personalRatio: 0,
                    personalFixValue: 0,
                    companyRatio: 0,
                    companyFixValue: 0
                }, {
                    insureType: 6,
                    isShow: 0,
                    minBase: 0,
                    maxBase: 0,
                    fixBase: 0,
                    personalRatio: 0,
                    personalFixValue: 0,
                    companyRatio: 0,
                    companyFixValue: 0
                }, {
                    insureType: 7,
                    isShow: 0,
                    minBase: 0,
                    maxBase: 0,
                    fixBase: 0,
                    personalRatio: 0,
                    personalFixValue: 0,
                    companyRatio: 0,
                    companyFixValue: 0
                }, {
                    insureType: 8,
                    isShow: 0,
                    minBase: 0,
                    maxBase: 0,
                    fixBase: 0,
                    personalRatio: 0,
                    personalFixValue: 0,
                    companyRatio: 0,
                    companyFixValue: 0
                }]
            }
        },
        // 获取列表
        async loadTable() {
            // 获取类型后重新赋值
            const { code, data } = await configQuery({
                cityId: this.params.cityId,
                insureTypeId: this.params.insureTypeId,
                fundsTypeId: this.params.fundsTypeId
            });
            if (code === '1') {
                this.params.configs = data
            }
        },
        // 城市回调
        handleCity(id, name) {
            this.params.cityId = id;
            this.cityName = name;
            this.getinsureTypeList();
        },
        // 社保类型回调
        handleInsureType() {
            if (this.params.cityId&&this.infoType == 'edit') {
                this.getinsureTypeList();
            }
        },
        // 公积金比例回调
        handleFundsType() {
            if (this.params.cityId&&this.infoType == 'edit') {
                this.getinsureTypeList();
            }
        },
        // 获取社保城市
        async getCityList() {
            const { code, data } = await cityAll();
            if (code === '1') {
                this.cityList = data;
            }
        },
        // 获取类型
        async getinsureTypeList() {
            const { code, data } = await typeGetTypes(this.params.cityId);
            if (code === '1') {
                this.insureTypeList = data.insureTypes;
                this.fundsTypeList = data.fundsTypes;
                if (this.infoType == 'edit') {
                    this.loadTable();
                }
            }
        },
        // 是否计算显示
        isShowChange(i, index) {
            this.params.configs[index].isShow = i == 0 ? 1 : 0;
        },
        // 添加城市
        async addCity() {
            if (!this.newCityName) {
                return this.$message.warning("请输入新城市名称");
            }
            const { code } = await cityAdd({
                cityName: this.newCityName
            });
            if (code === '1') {
                this.$message.success('添加成功');
                this.newCityName = "";
                this.getCityList();
            }
        },
        // 删除城市
        async delCity() {
            if (!this.params.cityId) {
                return this.$message.warning("请选择社保城市");
            }
            const { code } = await cityDelete(this.params.cityId);
            if (code === '1') {
                this.$message.success('删除成功');
                this.params.cityId = "";
                this.getCityList();
            }
        },
        // 添加社保类型
        async addInsureType() {
            if (!this.newInsureTypeName) {
                return this.$message.warning("请输入新类型");
            }
            const { code } = await typeAdd({
                type: 1,
                cityId: this.params.cityId,
                typeName: this.newInsureTypeName
            });
            if (code === '1') {
                this.$message.success('添加成功');
                this.newInsureTypeName = "";
                this.getinsureTypeList();
            }
        },
        // 删除社保类型
        async delInsureType() {
            if (!this.params.insureTypeId) {
                return this.$message.warning("请选择社保类型");
            }
            const { code } = await typeDelete(this.params.insureTypeId);
            if (code === '1') {
                this.$message.success('删除成功');
                this.params.insureTypeId = undefined;
                this.getinsureTypeList();
            }
        },
        // 添加公积金比例
        async addFundsType() {
            if (!this.newFundsTypeName) {
                return this.$message.warning("请输入新比例");
            }
            const { code } = await typeAdd({
                type: 2,
                cityId: this.params.cityId,
                typeName: this.newFundsTypeName
            });
            if (code === '1') {
                this.$message.success('添加成功');
                this.newFundsTypeName = "";
                this.getinsureTypeList();
            }
        },
        // 删除公积金比例
        async delFundsType() {
            if (!this.params.fundsTypeId) {
                return this.$message.warning("请选择公积金比例");
            }
            const { code } = await typeDelete(this.params.fundsTypeId);
            if (code === '1') {
                this.$message.success('删除成功');
                this.params.fundsTypeId = undefined;
                this.getinsureTypeList();
            }
        },
        // 比例配置提交
        async addFormSubmit() {
            if (!this.params.cityId) {
                return this.$message.error("请选择社保城市");
            }
            this.submitLoading = true;
            const { code } = await configAdd(this.params);
            this.submitLoading = false;
            if (code === '1') {
                this.visible = false;
                this.$message.success('操作成功')
                this.$emit('on-ok')
            }
        },
        // 关闭回调
        modalClose() {
            this.$emit('on-ok')
        }, 
    }
}
</script>
<style lang="less">
.info_modal {
    .formRequired {
        .ant-form-item-label::before {
            display: inline-block;
            margin-right: 4px;
            color: #f5222d;
            font-size: 14px;
            font-family: SimSun, sans-serif;
            line-height: 1;
            content: '*';
        }
    }

    .annexList {
        padding-top: 10px;

        .list {
            width: 100%;
            height: 25px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 15px;
        }
    }
}</style>
